<!-- 底部购物车 -->
<script setup lang="ts">
import CartLogo from '@/assets/imgs/shop_page/shop-cart/shop-cart.png'
import EmptyCartLogo from '@/assets/imgs/shop_page/shop-cart/shop-cart-o.png'
import { useCartStore } from '@/stores/cart'
import { computed } from 'vue'
import { useToggleShow } from '@/biz/hooks/useToggle'
import GoodsItem from './GoodsItem.vue'

import { useTransition } from '@/biz/hooks/useTransition'
import { useEventBus } from '@/biz/hooks/useEventBus'

const store = useCartStore()
const cartLogo = computed(() => (store.total ? CartLogo : EmptyCartLogo))
const [isCartListShown, toggleCartListShown] = useToggleShow(false)

const eventBus = useEventBus()
const { items, start, beforeEnter, enter, afterEnter } = useTransition()
eventBus.on('cart-add', (el) => {
  start(el)
})

const showCartListPopup = () => {
  if (!store.total) {
    return
  }
  toggleCartListShown()
}

//清空购物车
const onClearCart = () => {
  store.clearCart()
}
</script>

<template>
  <div class="shop-cart">
    <VanPopup v-model:show="isCartListShown" round position="bottom">
      <div class="shop-cart__popup">
        <div class="shop-cart__tips">
          <div>满49减3，还差<span>24.2</span>元<span> 去凑单></span></div>
          <div class="tips-detail">已包含：配送费减 5、特价优惠 20 元</div>
        </div>

        <div class="shop-cart__allcheck">
          <VanCheckbox
            :model-value="store.isAllChecked"
            checked-color="rgb(31, 175, 243)"
            @update:model-value="(isAllChecked) => store.toggleAllChecked(isAllChecked)"
          >
            <span class="allcheck-label">全选</span>
          </VanCheckbox>
          <div class="allcheck-total">(已选{{ store.totalSelect }}件)</div>
          <span class="allcheck-clear" @click="onClearCart"><VanIcon name="delete-o" />清空</span>
        </div>

        <div class="shop-cart__goods">
          <VanCheckboxGroup
            :model-value="store.state.checkedIds"
            checked-color="rgb(31, 175, 243)"
            @update:model-value="(ids) => store.pushOrRemoveCheckIds(ids)"
          >
            <div v-for="v in store.state.items" :key="v.id" class="goods-item">
              <VanCheckbox :name="v.id"></VanCheckbox>
              <GoodsItem :data="v" class="flex" :allow="false" />
            </div>
          </VanCheckboxGroup>
        </div>
      </div>

      <div class="shop-cart__fee">
        <span>包装费</span>
        <span class="label"> 另需<span class="fee">￥5</span> </span>
      </div>
    </VanPopup>

    <div class="shop-cart__tips">配送费<span>满0.01减7</span>、全店<span>满49减3</span></div>
    <div class="shop-cart__content" @click="showCartListPopup">
      <div class="content__left">
        <div class="content__left__logo">
          <img class="logo" :src="cartLogo" />
          <div v-if="store.total" class="total">{{ store.total }}</div>
        </div>
        <div class="content__left__info">
          <div class="info__price">
            <template v-if="store.total">
              <span class="info__price--now"
                >￥<span>{{ store.totalPrice }}</span>
              </span>
              <span class="info__price--old">￥{{ store.totalOldPrice }}</span>
            </template>
            <span v-else class="info__price--empty">未选购商品</span>
          </div>
          <div class="info__desc">另需配送费 5 元</div>
        </div>
      </div>
      <div class="content__right">
        <div class="order-btn" v-if="store.total">
          <div class="label">领券结算</div>
          <div>预计券后￥{{ store.totalPrice }}</div>
        </div>
        <div v-else class="order-btn order-btn--empty">￥20起送</div>
      </div>
    </div>

    <div class="shop-cart__ball-container">
      <div v-for="(v, i) in items" :key="i">
        <Transition @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
          <div v-show="v.isShown" class="ball">
            <div class="inner"></div>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shop-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
  width: 100%;
  &__tips {
    text-align: center;
    background-color: rgb(253, 245, 222);
    font-size: 12px;
    padding: 8px 0;
    span {
      color: red;
    }
  }
  &__content {
    display: flex;
    padding: 0 10px;
    height: 45px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }
  .content__left {
    display: flex;
    align-items: center;
    flex: 1;
    .logo {
      width: 50px;
      height: 44px;
    }
    &__logo {
      position: relative;
      .total {
        position: absolute;
        border-radius: 50%;
        color: white;
        background: rgb(255, 61, 61);
        top: 2px;
        width: 17px;
        height: 17px;
        right: 0;
        text-align: center;
        font-size: 12px;
        line-height: 17px;
        transform: translateX(40%);
      }
    }

    &__info {
      margin-left: 10px;
      font-size: 12px;
      color: gray;
      .info__price {
        line-height: 18px;
        &--now {
          font-size: 12px;
          font-weight: bold;
          color: black;
          span {
            font-size: 18px;
          }
        }
        &--old {
          font-size: 12px;
          color: gray;
          text-decoration: line-through;
        }
        &--empty {
          font-weight: bold;
        }
      }
    }
  }
  .content__right {
    .order-btn {
      text-align: center;
      border-radius: 18px;
      color: white;
      background: var(--op-primary-color);
      font-size: 12px;
      height: 36px;
      padding: 0 18px;
      .label {
        font-size: 14px;
        padding-top: 2px;
      }
      &--empty {
        font-size: 16px;
        background: rgb(152, 152, 152);
        line-height: 36px;
      }
    }
  }

  &__popup {
    background: var(--op-gray-bg-color);
  }

  &__allcheck {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    background: white;
    .allcheck-label {
      font-size: 14px;
      font-weight: bold;
    }

    .allcheck-total {
      flex: 1;
      font-size: 12px;
      color: gray;
    }

    .allcheck-clear {
      color: gray;
    }
  }

  &__goods {
    overflow: auto;
    padding: 15px 10px 0 10px;
    margin-bottom: 10px;
    max-height: 400px;
    background: white;
    .goods-item {
      display: flex;
      margin-bottom: 15px;
      .flex {
        margin-left: 10px;
        flex: 1;
      }
    }
  }

  &__fee {
    padding: 14px;
    font-size: 14px;
    background: rgb(254, 254, 254);
    .label {
      margin-left: 30px;
      font-size: 14px;
      color: gray;
      .fee {
        color: red;
        font-size: 18px;
      }
    }
  }

  &__ball-container {
    .ball {
      position: fixed;
      bottom: 10px;
      left: 25px;
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
      .inner {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--op-primary-color);
        transition: all 0.4s linear;
      }
    }
  }
}
</style>
